<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>汽车图标</title>
		<style type="text/css">
			*{
				box-sizing: border-box;
			}
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#container{
				border: 1px solid gray;
				display: flex;
				justify-content: center;
				flex-direction: column;
				
				width: 700px;
				height: 500px;
			}
			h3{
				text-align: center;
			}
			#container ul{
				background-color: orange;
				display: flex;
				list-style-type: none;
				justify-content: center;
				padding: 0;
			}
			#container li{
				text-align: center;
				width: 120px;
				height: 120px;
				border: 1px solid gray;
				margin: 5px;
			}
			li a,strong{
				display: block;
				text-decoration: none;
			}
			li img{
				width: 100%;
				display: none;
				
			}
			
			/*筛选class属性为mouseOver的li元素*/
			#container li.mouseOver{
				
				transform: scale(1.2,1.2);
				border: 1px solid red;
			}
			.mouseOver img{
				display: block;
				
			}
			.mouseOver a{
				display: none;
					
			}
		</style>
		
		<script type="text/javascript">
			
			//当页面加载完成
			window.onload = function(){
				
				var allLi = document.querySelectorAll('li');
				
				for (var i = 0 ; i < allLi.length ; i++) {
					
					var li = allLi[i];
					
					li.onmouseenter = function(e){
						
						e.target.className = 'mouseOver';
					}
					
					li.onmouseleave = function(e){
						
						e.target.className = '';
					}
				}
				
			}
		</script>
	</head>
	<body>
		
		<main id='container'>
			
			<h3>汽车标志大全</h3>
			<ul>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/1.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/2.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/3.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/4.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/5.jpg" alt="" />
				</li>
			</ul>
			<!--...........-->
			<ul>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/6.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/7.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/8.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/9.jpg" alt="" />
				</li>
				<li>
					<a href="#"><strong>BMW</strong>宝马汽车</a>
					<img src="img/10.jpg" alt="" />
				</li>
			</ul>
			
		</main>
		
	</body>
</html>
